<template>
  <view>
    <u-navbar
      backIconColor="#fff"
      title-size="36"
      title="我的豆"
      :is-back="true"
      :background="background"
      :border-bottom="false"
      title-color="#fff"
    ></u-navbar>
    <view class="" style="position: relative">
      <view
        class="contentBg"
        :style="{
          paddingTop: `${statusBarHeight + navbarHeight}px`,
          backgroundImage: `url(${getImageUrl('alli-bg.png')})`,
          height: `${149 + statusBarHeight}px`,
          top: `-${statusBarHeight + navbarHeight}px`
        }"
      >
      </view>
    </view>
    <view class="content" v-if="digitalAssets">
      <view
        class="dis-flex flex-x-center"
        style="
          font-weight: bold;
          font-size: 32rpx;
          color: white;
          margin-bottom: 30rpx;
          margin-top: -30rpx;
        "
      >
        <text>共有</text>
        <text style="color: orange">{{ digitalAssets.cryptocurrency }}</text>
        <text>个豆</text>
      </view>
      <view class="card">
        <view class="top dis-flex flex-y-between flex-y-center" @click="routeTo('/alliance/beans')">
          <view
            >联盟豆
            <text class="text">(可投入增值)</text>
          </view>
          <u-icon name="/static/more.png" size="24"></u-icon>
        </view>
        <u-line></u-line>
        <view class="bottom dis-flex flex-y-between flex-y-center">
          <view class="bottom-num">{{ digitalAssets.cryptocurrencyOrigin }}</view>
          <view class="bt-group dis-flex">
            <view class="bt" @click="routeTo('/alliance/invest')">兑换投入</view>
            <view class="bt warning" @click="routeTo('/alliance/exchange?type=1')">兑换收益豆</view>
          </view>
        </view>
      </view>
      <view class="card">
        <view
          class="top dis-flex flex-y-between flex-y-center"
          @click="routeTo('/alliance/shouyidou')"
        >
          <view
            >收益豆
            <text class="text">(不可投入增值)</text>
          </view>
          <u-icon name="/static/more.png" size="24"></u-icon>
        </view>
        <u-line></u-line>
        <view class="bottom dis-flex flex-y-between flex-y-center">
          <view class="bottom-num">{{ digitalAssets.cryptocurrencyIncrement }}</view>
          <view class="bt-group dis-flex">
            <view class="bt blue" @click="routeTo('/alliance/goods')">兑换商品</view>
            <view class="bt" @click="routeTo('/alliance/exchange?type=2')">兑换现金</view>
            <!-- <view class="bt blue">转化分红</view> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
export default {
  data() {
    return {
      background: {
        background: 'transparent'
      },
      statusBarHeight: systemInfo.statusBarHeight,
      height: 0,
      digitalAssets: null
    }
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  onShow() {
    this.$u.get('/app-api/member/cloud-alliance-user/center').then((res) => {
      // this.allianceInfo = res.data.user
      this.digitalAssets = res.data.digitalAssets
    })
  },
  methods: {
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.contentBg {
  width: 100%;
  position: absolute;
  top: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  height: 298rpx;
}

.content {
  position: relative;
  padding: 39rpx 0;
  margin-top: 49rpx;

  .card {
    height: 220rpx;
    background: #ffffff;
    border-radius: 10rpx;
    margin: 0 20rpx;
    padding: 0 20rpx;
    margin-bottom: 20rpx;

    .top {
      padding: 26rpx 0;
      font-weight: 600;
      font-size: 30rpx;

      .text {
        font-size: 24rpx;
        color: #999999;
        font-weight: 400;
      }
    }

    .bottom {
      margin-top: 30rpx;

      .bottom-num {
        font-weight: 600;
        font-size: 48rpx;
        color: #333333;
      }

      .bt-group {
        .bt {
          width: 136rpx;
          height: 50rpx;
          background: #10a28f;
          border-radius: 25rpx;
          font-size: 24rpx;
          color: #ffffff;
          text-align: center;
          line-height: 50rpx;
          margin-left: 20rpx;
        }

        .warning {
          background: #ff6f10;
        }

        .blue {
          background: #68b4eb;
        }
      }
    }
  }
}
</style>
